import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // 导入Quill样式

// 确保页面支持中文字符集
import { createElement, useEffect, useState } from 'react';

const Editor = ({ value, onChange, ...rest }) => {
  const [editorHtml, setEditorHtml] = useState(value);

  const onChanges = (v) => {
    setEditorHtml(v);
    onChange?.(v);
  };

  useEffect(() => {
    setEditorHtml(value);
  }, [value]);

  return (
    <ReactQuill
      value={editorHtml}
      onChange={onChanges}
      modules={{
        toolbar: [
          [{ header: '1' }, { header: '2' }, { font: [] }],
          [{ list: 'ordered' }, { list: 'bullet' }],
          ['bold', 'italic', 'underline'],
          [{ align: [] }],
          ['link', 'image'],
        ],
      }}
      formats={[
        'header',
        'font',
        'list',
        'bullet',
        'bold',
        'italic',
        'underline',
        'align',
        'link',
        'image',
      ]}
      theme="snow"
      {...rest}
    />
  );
};

export default Editor;
